<!doctype html>
<html class="no-js" lang="zh" data-aspaniv-t lang-t="lang">

<head>
    <meta charset="utf-8" />
    <meta name="Author" content="LongBao">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    	<meta name="renderer" content="webkit">
    <title data-t="pages.index">注册-Long++ </title>
    <link rel="stylesheet" href="css/ff2.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
                        
    <meta name="description" content="LongBao 支付云 SDK 让你在 app 和网站中轻松加入支付功能。一次申请开通多个支付渠道，一次接入所有平台和支付方式，一站管理所有交易。" content-t="descriptions.index"/>
    <meta name="keywords" content="Ping++,支付SDK,支付开发,支付接入,聚合支付,支付,app支付,移动应用支付,支付平台,在线支付,游戏支付,网上支付,网络支付,统一支付平台,手机支付平台,手机支付,手机网上支付,快捷支付,一键支付,电子支付,安全支付,第三方支付接口,支付宝支付,支付宝接口,移动支付,在线支付,第三方支付,支付平台,银联支付,银联在线支付,银联快捷支付,银行支付,网银支付平台,网银支付,pos支付,app支付,支付接口,支付API,支付宝接口,微信支付接口,银联支付接口,支付云服务,微信红包,红包SDK,微信支付,支付宝支付"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <style>
    #name_1{max-width: 500px;margin: 0 auto;margin-top: 80px;padding: 0 5%;}
    #name_1>h2{text-align: center;margin: 30px;}
    .left_1{display: inline-block;width: 20%;}
    .right_1{display: inline-block;width: 70%;}
    form>div{border-bottom: solid 1px #000; margin-top: 17px;}
    .right_1 input{border: solid 0px #fff;margin-bottom: 0; font-size: .9rem}
    .right_1 input:focus{border: solid 0px #fff;background-color: #fff;}
    /*.right_1 input:focus div{background-color: #000}*/
    #button_1 {height: 35px; background-color: deepskyblue;width: 100%;display: inline-block;border-radius: 5px;color: #fff;padding: 6px 0}
    #button_1:hover{box-shadow: 0 0 5px #000;cursor:pointer;}
    i{font-weight: 100;}
    #http{border-bottom: solid 0 #fff;text-align: center;}
    #http span{font-style: 14px;}
    #http a{font-size: 14px;}
    #http input{margin: 0;padding-top: 10px;}
     input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px white inset; }
    /*input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
    }*/
    .red{color: red;}
    font{font-size: 12px;}
    i{margin-left:20px; }
    /*@-moz-document url-prefix() { i { margin-bottom:20px; } }*/
    /*form input{font-size: 0.8rem ;}*/
    </style>
</head>

<body class="">
    <div class="top-bar-wrapper">
        <div class="row align-center">
            <div class="title-bar show-for-small-only">
                <!--<button id="hamburger" class="menu-icon" type="button" data-toggle></button>-->
                <div class="title-bar-title">
                    <a href="index.html" data-aspaniv-t href-t="route.root" title="LongPay 是深圳龙宝网络科技有限公司的注册商标">
                        <div class="top-bar__logo"></div>
                    </a>
                </div>
                <a id="hamburger" class="title-bar__toggle" target="_blank" data-toggle>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
            </div>

            <div class="small-11 medium-10 large-10 hide-for-small-only">
                <div class="top-bar">
                    <div class="top-bar-title">
                        <a href="index.html" data-aspaniv-t href-t="route.root">
                            <div class="top-bar__logo"></div>
                        </a>
                    </div>

                    <div class="top-bar-right">
                        <ul class="dropdown menu" data-dropdown-menu>
                            <div class="top-bar-left">
                                <ul class="dropdown menu" data-dropdown-menu>
                                    <li class="is-dropdown-submenu-parent">
                                        <a href="#" data-t="top-nav.more" style="padding-right: 10px;">产品</a>
<ul class="menu vertical">
    <li>
        <a href="#" data-t="top-nav.account"><img src="img/account-system.svg" alt="">聚合支付</a>
    </li>
    <li>
        <a href="#" data-t="top-nav.platform"><img src="img/aggregate-pay.svg" alt="">账户系统</a>
    </li>
    <li>
        <a href="#" data-t="top-nav.dashboard"><img src="img/aggregate-pay.svg" alt="">商户系统</a>
    </li>
    <li>
        <a href="#" data-t="top-nav.financing"><img src="img/big-data.svg" alt="">大数据商业智能系统</a>
    </li>
</ul>
</li>
<li><a href="#">产品详情</a></li>
</ul>
</div>
<li class="is-dropdown-submenu-parent">
    <a href="" data-t="top-nav.devcenter">开发者中心</a>

    <ul class="menu vertical">
        <li><a href="#" data-t="top-nav.docs">开发指南</a></li>
        <li><a href="#" data-t="top-nav.apireference">API 文档</a></li>
        <li><a href="#" data-t="top-nav.download">SDK 下载</a></li>
        <li class="divider"><a href="#" data-t="top-nav.community" target="_blank">开发者社区</a></li>
    </ul>
</li>
<li><a href="#" data-t="top-nav.login">帮助</a></li>
<li><a href="#" data-t="top-nav.login">登录</a></li>
<!--<li style=""><a href="#" class="button cta hollow small" data-t="top-nav.signup" style="border: solid 1px #000000; border-radius: 3px; color: #000000;">注册</a>-->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<!--以下手机端页头-->
<div class="mobile-nav show-for-small-only" id="sidebar-menu">
    <ul>
        <li>
            <dl>
                <dt data-t="top-nav.features"><a>产品</a></dt>
                <dd><a href="#">-聚合支付</a></dd>
                <dd><a href="#">-账户系统</a></dd>
                <dd><a href="#">-商户系统</a></dd>
                <dd><a href="#">-大数据商业智能系统</a></dd>
            </dl>
        </li>
        <li><a href="#">解决方案</a></li>
        <li class="divider"><a href="#">Apple Pay</a></li>
        <li><a href="#" target="_blank" data-t="top-nav.help">帮助中心</a></li>
        <li class="divider"><a href="#" data-t="top-nav.documentation">开发者中心</a></li>
        <li><a href="#" data-t="top-nav.login">登入</a></li>
        <!--<li class="divider"><a href="#" data-t="top-nav.signup">注册</a></li>-->
    </ul>
</div>
<!--以上手机端页头-->



<!--一下是注册表格-->
<div id="name_1">
    <h2>注册</h2>
    <form id="form">
        <!--<table border="1" width="60%" align="center" cellpadding="5" cellspacing="0">-->
            <!--邮箱-->
            <div class="y_box">
                <span class="left_1" style="padding: 0 0 0px 0;">
                    <i class="fa fa-envelope-o " aria-hidden="true"></i>
                    <!--<i class="fa fa-camera-retro fa-lg"></i>-->
                    
                </span>
                <div class="right_1">
                    <input type="email" name="username" id="youxiang" placeholder="请输入注册邮箱" > 
                </div>
            </div>
                <span id="youxiang_" style="color: rgb(38,164,241);"></span>
                <!--密码-->
            <div class="password_box">
                <span class="left_1">
                    <!--<i class="fa fa-briefcase" aria-hidden="true"></i>-->
                    <!--<i class="fa fa-check-square fa-2x" aria-hidden="true"></i>-->
                    <i class="fa fa-key" aria-hidden="true"></i>
                </span>
                <span class="right_1">
                    <input type="password" name="password" id="password" placeholder="密码为字母数字下划线[6-16位]">
                </span>
            </div>
                <span id="passwordSpan" style="color: rgb(38,164,241);"></span>
                <!--确认密码-->
            <div class="ePassword_box">
                <span class="left_1">
                    <!--<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i> -->
                    <i class="fa fa-key" aria-hidden="true" style="color: #000"></i>
                </span>
                <span class="right_1">
                    <input type="password" name="confirm" id="ePassword" placeholder="再次输入密码">
                </span>
            </div>
                <span id="confirmSpan" style="color: rgb(38,164,241);"></span>
                <!--QQ-->
            <div class="qq_box">
                <span class="left_1">
                    <i class="fa fa-qq" aria-hidden="true"></i>
                </span>
                <span class="right_1">
                    <input type="text" name="email" id="qq" placeholder="请输入QQ号码">
                </span>
            </div>
                <span id="emailSpan" style="color: rgb(38,164,241);"></span>
                <!--用户名-->
            <div class="name_box">
                <span class="left_1">
                    <i class="fa fa-user-o" aria-hidden="true"></i>
                </span>
                <span class="right_1">
                    <input type="text" name="birthday" id="name" placeholder="请输入您的真实姓名">
                </span>
            </div>
                <span id="name_" style="color: rgb(38,164,241);"></span>

                <!--身份证-->
                <div class="shenfenzheng_box">
                <span class="left_1">
                   <i class="fa fa-vcard-o" aria-hidden="true"></i>
                </span>
                <span class="right_1">
                    <input type="text" name="birthday" id="shenfenzheng" placeholder="请输入您的身份证号码">
                </span>
            </div>
                <span id="sfz" style="color: rgb(38,164,241);"></span>

                <!--手机-->
            <div class="shouji_box"> 
                <span class="left_1">
                    <i class="fa fa-tablet" aria-hidden="true"></i>
                </span>
                <span class="right_1">
                    <input type="text" name="phone" id="shouji" placeholder="请输入手机号码">
                </span>
            </div>
                  <span id="shouji_" style="color: rgb(38,164,241);"></span>
            <!--验证短信-->
           <div class="duanxin_box">
                <span class="left_1">
                    <!--<i class="fa fa-commenting-o" aria-hidden="true"></i>-->
                    <i class="fa fa-whatsapp" aria-hidden="true"></i>
                </span>
                <span class="right_1">
                    <input type="text" name="email" id="duanxin" placeholder="请输入您的短信验证码">
                </span>
            </div>
                <span id="emailSpan" style="color: rgb(38,164,241);"></span>
                <!--验证码-->
            <div class="yanzheng_box">
                <span class="left_1">
                    <i class="fa fa-shield" aria-hidden="true"></i>
                </span>
                <span class="right_1">
                    <input type="text" name="phone" id="yanzheng" placeholder="请输入验证码">
                </span>
            </div>
                    <span id="phonelSpan" style="color: rgb(38,164,241);"></span>
            
            <div id="http">
                    <input type="checkbox" name="phone" id="xie" placeholder="请输入验证码"
                    ><span>&nbsp; 我已阅读并同意  <a href="#">《服务协议》</a>和<a href="#">《隐私协议》</a></span>
                    
                    <!--<span></span>-->
                    
            </div>
            
            <div style="border-bottom: none;margin-bottom: 50px;">
                <span colspan="2" align="center" onclick="test()" id="button_1" style="text-align: center;">
                    确认注册
                    <!--<input  type="submit" onclick="check_input()"  value="新用户注册">-->
                    
                </span>
            </div>
            <input type="button" onclick="Generate_data()" value="产生测试数据">
         <!--</table>-->
    </form>
</div>




<!--<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<!--<script src="js/jquery.zySlide.js" type="text/javascript" charset="utf-8"></script>-->
<!--<script src="js/index.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/j1.js"></script>
              
<script type="text/javascript">

window.onload = function(){
     //通过ID或名字获取每个对象
  var youxiang = document.getElementById("youxiang");//邮箱
  var password = document.getElementById("password");//mima
  var ePassword = document.getElementById("ePassword"); //确认密码
  var qq = document.getElementById("qq");//qq
  var name = document.getElementById("name");//用户名
  var shenfenzheng = document.getElementById("shenfenzheng");//身份证
  var shouji = document.getElementById("shouji");//手机
  var duanxin = document.getElementById("duanxin");//短信
  var yanzheng = document.getElementById("yanzheng");//验证

  //设置每个对象的onblur事件(对象失去焦点时发生),并调用各自的方法
  youxiang.onblur = checkUsername;
  password.onblur = checkPassword;
  ePassword.onblur = checkConfirm;
  qq.onblur = checkEmail;
  name.onblur = checkBirthday;
  shenfenzheng.onblur = checkGender;
  shouji.onblur = checkInterest;
  duanxin.onblur = checkCity;   
  yanzheng.onblur = check; 
  //设置每个对象的onfocus事件(对象获取焦点时发生),并调用各自的方法
  youxiang.onfocus = checkUsername_;
  password.onfocus = checkPassword_;
  ePassword.onfocus = checkConfirm_;
  qq.onfocus = checkEmail_;
  name.onfocus = checkBirthday_;
  shenfenzheng.onfocus = checkGender_;
  shouji.onfocus = checkInterest_;
  duanxin.onfocus = checkCity_;   
  yanzheng.onfocus = check_;
  //每个onfocus事件的方法,获取焦点是触发。
  //邮箱验证方法
  function checkUsername_(){
      console.log("快快快")
//    var emailObjValue = youxiang.value;
//    var emailRegex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,3}$/;
//    var msg ='<i class="fa fa-hand-peace-o" aria-hidden="true"></i>'; 
   var y_box = document.getElementsByClassName("y_box")[0];
   console.log(y_box)
   var youxiang_text = document.getElementsByClassName("fa-envelope-o")[0];
   console.log(youxiang_text)
   y_box.style.cssText = 'border-bottom: solid 2px rgb(81,184,242)';
   youxiang_text.style.cssText = "color: rgb(81,184,242); font-size:20px"
//    console.log(youxiang_text)

  }   
//密码验证方法
  function checkPassword_(){
   var y_box = document.getElementsByClassName("password_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-key")[0];
   y_box.style.cssText = "border-bottom: solid 2px rgb(81,184,242);"
   youxiang_text.style.cssText = "color: rgb(81,184,242);font-size:20px "
  }
  //确认密码验证方法
  function checkConfirm_(){
   var y_box = document.getElementsByClassName("ePassword_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-key")[1];
   y_box.style.cssText = "border-bottom: solid 2px rgb(81,184,242);"
   youxiang_text.style.cssText = "color: rgb(81,184,242); font-size:20px"
  }
//qq验证方法
  function checkEmail_(){
   var y_box = document.getElementsByClassName("qq_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-qq")[0];
   y_box.style.cssText = "border-bottom: solid 2px rgb(81,184,242);"
   youxiang_text.style.cssText = "color: rgb(81,184,242); font-size:20px"
  }
//用户名验证方法
    function checkBirthday_(){
     var y_box = document.getElementsByClassName("name_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-user-o")[0];
    y_box.style.cssText = "border-bottom: solid 2px rgb(81,184,242);"
    youxiang_text.style.cssText = "color: rgb(81,184,242); font-size:20px"
    }
//身份证验证方法
  function checkGender_(){
   var y_box = document.getElementsByClassName("shenfenzheng_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-vcard-o")[0];
    y_box.style.cssText = "border-bottom: solid 2px rgb(81,184,242);"
    youxiang_text.style.cssText = "color: rgb(81,184,242); font-size:20px"
  } 
//手机验证方法
  function checkInterest_(){
     var y_box = document.getElementsByClassName("shouji_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-tablet")[0];
    y_box.style.cssText = "border-bottom: solid 2px rgb(81,184,242);"
    youxiang_text.style.cssText= "color: rgb(81,184,242); font-size:20px"
  } 
//短信验证方法
  function checkCity_(){
   var y_box = document.getElementsByClassName("duanxin_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-whatsapp")[0];
    y_box.style.cssText = "border-bottom: solid 2px rgb(81,184,242);"
    youxiang_text.style.cssText = "color: rgb(81,184,242); font-size:20px"
  }

function check_(){
    var y_box = document.getElementsByClassName("yanzheng_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-shield")[0];
    y_box.style.cssText = "border-bottom: solid 2px rgb(81,184,242);"
    youxiang_text.style.cssText = "color: rgb(81,184,242); font-size:20px;"
  }




  //每个onblur事件的方法,8个方法------------------------------------------------------------------------------------------
  //邮箱验证方法
  function checkUsername(){
    //   var rr = document.getElementById("youxiang_");//
    // console.log(rr)
   var emailObjValue = youxiang.value;
   var emailRegex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,3}$/;
   var msg ='<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>'; 
   var y_box = document.getElementsByClassName("y_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-envelope-o")[0];
   youxiang_text.style.cssText = "color: #333;font-size:16px;"
   y_box.style.cssText = "border-bottom: solid 1px #333;"
//    console.log(y_box)
   if(!emailObjValue)
      msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'>&nbsp;&nbsp;</i><font color='red'>Email必须填写!</font>";
   else if(!emailRegex.test(emailObjValue))
      msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  >&nbsp;&nbsp;</i><font color='red'>Email格式不正确!</font>";
   var span = document.getElementById("youxiang_");
   span.innerHTML = msg;
   return msg == '<i class="fa fa-hand-peace-o" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';
//    var usernameValue = trim(youxiang.value);
//    var usernameRegex = /^[\u4E00-\u9FA5]{2,4}$/;
//    var msg ="<img src='img/true.png' style='width:12px'>";
//    if(usernameValue == null || usernameValue == "")
//     msg ="<font color='red'>用户名必须填写!</font>";
//    else if(!usernameRegex.test(usernameValue))
//     msg ="<font color='red'>用户名格式不正确</font>";
//    var span = document.getElementById("usernameSpan");
//    span.innerHTML = msg;
//    return msg == "<img src='img/true.png' style='width:12px'>";
  }
//密码验证方法
  function checkPassword(){
   var passwordValue = password.value;
   var passwordRegex = /^(\w){6,16}$/;
   var msg ='<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';
   var y_box = document.getElementsByClassName("password_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-key")[0];
   y_box.style.cssText = "border-bottom: solid 1px #333;"
   youxiang_text.style.cssText = "color: #333;font-size:16px; "
   if (!passwordValue) 
    msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  >&nbsp;&nbsp;</i><font color='red'>密码必须填写!</font>";
   else 
    if (!passwordRegex.test(passwordValue)) {
     msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  >&nbsp;&nbsp;<font color='red'>密码必须为数字字母下划线[6-16位]</font>";
     //alert(msg);
    }
   var span = document.getElementById("passwordSpan");
   span.innerHTML = msg;
   return msg == '<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';
  }

  //确认密码验证方法
  function checkConfirm(){
   var confirmValue = ePassword.value;
   var passwordValue = password.value;
   var y_box = document.getElementsByClassName("ePassword_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-key")[1];
   y_box.style.cssText = "border-bottom: solid 1px #333;"
   youxiang_text.style.cssText = "color: #333;font-size:16px; "
   var msg ='<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';
   if (!confirmValue) 
    msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>确认密码必须填写!</font>";
   else if (confirmValue != passwordValue)
    msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>密码必须一致!</font>";

   var span = document.getElementById("confirmSpan");

   span.innerHTML = msg;
    return (msg == '<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>');


  }
//qq验证方法
  function checkEmail(){
   var emailObjValue = qq.value;
   var y_box = document.getElementsByClassName("qq_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-qq")[0];
   y_box.style.cssText = "border-bottom: solid 1px #333;"
   youxiang_text.style.cssText = "color: #333;font-size:16px;"
   var emailRegex = /^[0-9]{5,11}$/;
   var msg ='<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>'; 
   console.log(emailRegex.test(emailObjValue))
   if(!emailObjValue)
      msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>QQ必须填写!</font>";
   else if(!emailRegex.test(emailObjValue))
      msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>请确认QQ格式不正确!</font>";
   var span = document.getElementById("emailSpan");

   span.innerHTML = msg;
   return msg == '<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';
  }
  //用户名验证方法
  function checkBirthday(){
   var name = document.getElementById("name");
   var usernameValue = trim(name.value);
   console.log(name)
   console.log(usernameValue)
   var y_box = document.getElementsByClassName("name_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-user-o")[0];
    y_box.style.cssText = "border-bottom: solid 1px #333;"
    youxiang_text.style.cssText = "color: #333; font-size:16px;"
   var usernameRegex = /^[\u4E00-\u9FA5]{2,4}$/;
   var msg ='<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';
   if(usernameValue == null || usernameValue == "")
    msg ="<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>用户名必须填写!</font>";
   else if(!usernameRegex.test(usernameValue))
    msg ="<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>用户名格式不正确</font>";
   var span = document.getElementById("name_");
   span.innerHTML = msg;
   return msg == '<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';

  }
  //身份证验证方法
  function checkGender(){
      var y_box = document.getElementsByClassName("shenfenzheng_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-vcard-o")[0];
    y_box.style.cssText = "border-bottom: solid 1px #333;"
    youxiang_text.style.cssText = "color: #333; font-size:16px;"
   var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
   var genderValue = shenfenzheng.value;
   console.log(genderValue)
   var msg ='<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';
   if(genderValue == null || genderValue == ""){
       msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>身份证必须填写!</font>";
   }else if(!isIDCard2.test(genderValue) ){
       msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>请正确填写身份证号码!</font>";
   }
      
   var span = document.getElementById("sfz");
   span.innerHTML = msg;
   return msg == '<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';
  } 
//手机验证方法
  function checkInterest(){
      var y_box = document.getElementsByClassName("shouji_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-tablet")[0];
    y_box.style.cssText = "border-bottom: solid 1px #333;"
    youxiang_text.style.cssText = "color: #333; font-size:16px;"
      var emailObjValue = shouji.value;
   var emailRegex = /^[0-9]{11,11}$/;
   var msg ='<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>'; 
   if(!emailObjValue)
      msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>手机必须填写!</font>";
   else if(!emailRegex.test(emailObjValue))
      msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>请确认手机号码!</font>";
   var span = document.getElementById("shouji_");

   span.innerHTML = msg;
   return msg == '<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';

  } 
//短信验证方法
  function checkCity(){
      var y_box = document.getElementsByClassName("duanxin_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-whatsapp")[0];
    y_box.style.cssText = "border-bottom: solid 1px #333;"
    youxiang_text.style.cssText = "color: #333; font-size:16px;"

   var emailObjValue = duanxin.value;
   var emailRegex = /^[0-9]{4,4}$/;
   var msg ='<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>'; 
   if(!emailObjValue)
      msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>验证码必须填写！</font>";
   else if(!emailRegex.test(emailObjValue))
    /*
    短信验证码的代码
    */ 
      msg = "<i class='fa fa-times-circle-o red' aria-hidden='true'  ></i>&nbsp;&nbsp;<font color='red'>验证码不正确！</font>";
   var span = document.getElementById("shouji_");

   span.innerHTML = msg;
   return msg == '<i class="fa fa fa-check" aria-hidden="true" style="float: right;position: relative;top: -1.6rem;"></i>';
   
  }

//验证码验证方法
function check(){
    var y_box = document.getElementsByClassName("yanzheng_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-shield")[0];
    y_box.style.cssText = "border-bottom: solid 1px #333;"
    youxiang_text.style.cssText = "color: #333; font-size:16px;"
    /*
    验证码的代码
    */ 

  }



  //获取表单对象,并且为表单提交事件写个方法
  var form = document.getElementById("form");
  form.onsubmit = function (){

   var bUsername = checkUsername();
   var bPassword = checkPassword();
   var bConfirm = checkConfirm();
   var bEmail = checkEmail();
   var bBirthday = checkBirthday();
   var bGender = checkGender();
   var bInterest = checkInterest();
   var bCity = checkCity();
   var bCity_ = check();

      //如果,每个上面的每个对象,验证成功,则还回true
   return bUsername && bPassword && bConfirm && bEmail && bBirthday && bGender && bInterest && bCity;
  }

 
 }


//--------------------------------------------------提交前检测数据-----------------------------------------------

   function test(){
        //检测邮箱
        var emailObjValue_1 = youxiang.value;
        var emailRegex_1 = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,3}$/;
        //检测密码
        var passwordValue = password.value;
        var passwordRegex = /^(\w){6,16}$/;
        //检测第二次密码输入
        var confirmValue = ePassword.value;
        var passwordValue = password.value;
        //检测QQ
        var emailObjValue_2 = qq.value;
        var emailRegex_2 = /^[0-9]{5,11}$/;
        //检测用户名
        var name = document.getElementById("name").value;
        // var usernameValue = name.value;
        var usernameRegex = /^[\u4E00-\u9FA5]{2,4}$/;
        //身份证验证方法
         var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
         var genderValue = shenfenzheng.value;
         //手机验证
          var emailObjValue_3 = shouji.value;
          var emailRegex_3 = /^[0-9]{11,11}$/;
          //法律信息
          var xie = document.getElementById("xie").checked
          console.log(xie)
        if(emailRegex_1.test(emailObjValue_1) && passwordRegex.test(passwordValue) && confirmValue == passwordValue && emailRegex_2.test(emailObjValue_2) && usernameRegex.test(name) && isIDCard2.test(genderValue) && emailRegex_3.test(emailObjValue_3) && xie == true){
            // function check_input(){
            alert("提交成功...")
            //  }
        }else {
            alert("信息不完整请补全后提交...")
        }
    //    if(){}
   }
   //--------------------------------------------------提交方法-------------------------------------------------
   


 //测试数据
 function Generate_data()
        {
            document.getElementById("youxiang").value = "jiyinghao_love@126.com";//邮箱
            document.getElementById("password").value = "123456";                //mima
            document.getElementById("ePassword").value = "123456";               //确认密码
            document.getElementById("qq").value = "244210065";                   //qq
            document.getElementById("name").value = "汲英豪";                     //用户名
            document.getElementById("shenfenzheng").value = "212725198811125678";//身份证
            document.getElementById("shouji").value = "15022796446";             //手机
            document.getElementById("duanxin").value = "3456";                   //短信
            document.getElementById("yanzheng").value = "1256";                  //验证
        }

  //去除用户名前后的空格
  function trim(s){
   return s.replace(/^\s+|\s+$/g,"");
  }  
  
</script>

</body>

</html>